<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>柱状图排序</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .box {
            position: relative;
            width: 950px;
            height: 350px;
            margin: 50px auto;
            border: 1px solid #f00;
        }

        li {
            position: absolute;
            bottom: 0;
            width: 50px;
            background-color: #0f0;
        }

        button {
            margin-top: 20px;
            margin-left: 100px;
            padding: 12px 40px;
            font-size: 16px;
            letter-spacing: .1rem;
            background-color: #fff;
            border-radius: 3px;
            border: 1px solid #999;
        }

        .act {
            background-color: rgb(236, 117, 32);
        }

        .done {
            background-color: rgb(15, 94, 15);
        }
    </style>
</head>

<body>
    <ul class="box">
        <!-- <li></li> -->
    </ul>

    <button>生成柱状图</button>
    <button>开始排序</button>

    <script src="../lib/jquery/jquery.min.js"></script>
    <script type="text/javascript">
        // create
        $("button:eq(0)").click(function () {
            // 10 个高度不一的柱状图，最小差为 20  [20,340]
            var str = "";
            var hArr = []; // 存储出现的高度，防止重复
            for (var i = 0; i < 10; i++) {
                var h = rd(20, 340, 20);
                if (hArr.indexOf(h) == -1) {
                    hArr.push(h);
                    // 40 40+50+40 40+50+40+50+40 40+50+40+50+40+50+40...
                    str += `<li style="left: ${ 40+90*i }px;height: ${ h }px;"></li>`;
                } else {
                    i--;
                }
            }
            $(".box").html(str);
        })


        // sort
        $("button:eq(1)").click(function () {
            var lis = $(".box")[0].children;
            var i = 0,
                j = 0,
                flag = true;

            var timer = setInterval(function (){
                // if(lis[i-1]){
                //     lis[i-1].classList.remove("act");
                // }
                // jq 静默警告
                $(lis).eq(i-1).removeClass("act");
                lis[i].classList.remove("act");

                // i 结束一圈的标志
                if(i == lis.length - j - 1){
                    // 判断flag
                    if(flag){
                        for(var k = 0; k <= i; k ++){
                            lis[k].classList.add("done");
                        }
                        console.log("提前终止");
                        // 提前终止
                        clearInterval(timer);
                        return;
                    }else {
                        // 添加结束颜色
                        lis[i].classList.add("done");
                        // 进行新的循环
                        j ++;
                        i = 0;
                        flag = true;
                    }
                }

                if(j == lis.length - 1){
                    clearInterval(timer);
                }

                // 给当前元素添加颜色
                lis[i].classList.add("act");
                lis[i+1].classList.add("act");

                if (lis[i].offsetHeight > lis[i+1].offsetHeight) {
                    var temp = lis[i].offsetLeft;
                    $(lis[i]).animate({
                        left: lis[i+1].offsetLeft
                    }, 400)
                    $(lis[i+1]).animate({
                        left: temp
                    }, 400)
                    flag = false;

                    // 交换li在lis数组中的位置
                    lis[i].before(lis[i+1]);
                }

                i ++;
            }, 600);
        })

        function rd(min, max, n) {
            return Math.floor(Math.random() * (max - min + 1) / n) * n + min;
        }
    </script>
</body>

</html>